<template>
  <q-layout view="hHh LpR fFf" class="max-w-7xl">
    <HeaderLayout></HeaderLayout>
    <q-drawer v-model="leftDrawerOpen" side="left" overlay>
      <div class="q-pa-sm">
        <div class="row justify-center no-wrap">
          <q-avatar size="80px">
            <q-img :src="webStore.userInfo.avatar" />
          </q-avatar>
        </div>
        <div class="row justify-center no-wrap q-pa-sm">
          <div class="text-blue-400 text-lg">
            {{ webStore.userInfo.username }}
          </div>
        </div>
        <div class="row justify-center no-wrap">
          <q-tabs active-color="primary" vertical v-model="indexTab">
            <q-route-tab
              v-for="item in tabList"
              :key="item.name"
              :name="item.name"
              :to="item.to"
              :label="item.label"
            />
          </q-tabs>
        </div>
        <div class="row justify-center no-wrap">
          <q-btn
            dense
            flat
            round
            @click="themeToggle"
            size="md"
            :icon="$q.dark.isActive ? 'dark_mode' : 'wb_sunny'"
          />
        </div>
      </div>
    </q-drawer>
    <q-page-container>
      <router-view v-slot="{ Component }">
        <KeepAlive exclude="CreationPage">
          <component :is="Component" />
        </KeepAlive>
      </router-view>
    </q-page-container>
    <LoginDig></LoginDig>
    <ChatDig></ChatDig>
  </q-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import { useWebStore } from 'src/stores/webStore';
import { useRoute } from 'vue-router';
import HeaderLayout from './HeaderLayout.vue';
import LoginDig from './LoginDig.vue';
import ChatDig from './chat/ChatDig.vue';
import { useWebSocketInit } from 'src/web-socket/WsInit';
// 搜索文本
const searchVal = ref('');
const route = useRoute();
const leftDrawerOpen = ref(false);

watch(
  () => route.fullPath,
  () => {
    if (route.query.text) {
      searchVal.value = route.query.text as string;
    } else {
      searchVal.value = '';
    }
  },
);
if (route.query.text) {
  searchVal.value = route.query.text as string;
} else {
  searchVal.value = '';
}

const $q = useQuasar();
const themeToggle = () => {
  if ($q.dark.isActive) {
    $q.dark.set(false);
    document.documentElement.classList.remove('dark');
  } else {
    $q.dark.set(true);
    document.documentElement.classList.add('dark');
  }
};

const webStore = useWebStore();

// 首页面Tab
const tabList = [
  { label: '主页', to: '/', name: 'home' },
  { label: '分类', to: '/category', name: 'category' },
  { label: '标签', to: '/tag', name: 'tag' },
  { label: '归档', to: '/all', name: 'all' },
];

// 主页
const indexTab = ref('home');
webStore.initCategory();
// 连接WebSocket
useWebSocketInit();
</script>

<style lang="scss" scoped></style>
